<!DOCTYPE html>
<html>
<head>
    <title>Webcam Frame Capture</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.js"></script>
    <script>
        var socket = io();
        socket.on("update", function(data) {
            document.getElementById("long-term-memory").innerHTML = data.long_term_memory;
            document.getElementById("short-term-memory").innerHTML = data.short_term_memory;
            document.getElementById("subconsciousness").innerHTML = data.subconsciousness;
            document.getElementById("thought").innerHTML = data.thought;
            document.getElementById("consciousness").innerHTML = data.consciousness;
            document.getElementById("answer").innerHTML = data.answer;
            document.getElementById("log").innerHTML = data.log;
        });
    </script>
</head>
<body>
    <h1>Terminal AGI</h1>
    <video id="webcam" autoplay></video>
    <canvas id="canvas" style="display:none;"></canvas>
    <img id="frame" src="">
    <p id="path"></p>
    <p>Thought: <span id="thought">{{ thought }}</span></p>
    <p>Consciousness: <span id="consciousness">{{ consciousness }}</span></p>
    <p>Subconsciousness: <span id="subconsciousness">{{ subconsciousness }}</span></p>
    <p>Answer: <span id="answer">{{ answer }}</span></p>
    <p>Long-Term Memory: <span id="long-term-memory">{{ long_term_memory }}</span></p>
    <p>Short-Term Memory: <span id="short-term-memory">{{ short_term_memory }}</span></p>
    <p>Log: <span id="log">{{ log }}</span></p>
    <script>
        const video = document.getElementById('webcam');
        const canvas = document.getElementById('canvas');
        const frame = document.getElementById('frame');
        const path = document.getElementById('path');
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(stream => {
                video.srcObject = stream;
                video.onloadedmetadata = () => {
                    canvas.width = video.videoWidth;
                    canvas.height = video.videoHeight;
                };
            });
        setInterval(() => {
            const context = canvas.getContext('2d');
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            const dataUrl = canvas.toDataURL('image/png');
            frame.src = dataUrl;
            path.textContent = dataUrl;
            $.post("/store_image_data_url", { data_url: dataUrl });
        }, 100);
    </script>
</body>
</html>